<template>
    <h1>data</h1>
    <p>{{ name }}</p>
    <h1>props</h1>
    <p>{{ title }}</p>
    <h1>methods</h1>
    <button @click="test">触发</button>
    <h1>computed</h1>
    <p>num 是 {{ num }}</p>
    <p>num2 是 {{ num2 }}</p>
    <button @click="addOne">+1</button>
    <Son />
</template>


<script>
import Son from './Son.vue';
export default {
    components:{
        Son
    },
    data(){
        return  {
            name:'李白',
            num: 1
        }
    },
    computed:{
        num2(){
            return this.num + 1
        }
    },
    watch:{
        num: function (newVal, oldVal) {
            console.log('num newVal',newVal);
            console.log('num oldVal',oldVal);
        },
        num2: (newVal, oldVal) => {
            console.log('num2 newVal',newVal);
            console.log('num2 oldVal',oldVal);
        },
    },
    props:{
        title:{
            type: String,
            required: true,
            default: '这是一个默认的title'
        }
    },
    methods:{
        test(){
            console.log(123);
            console.log(this.name);
            this.name = '杜甫'
            console.log(this.name);
            this.testFn()

            console.log('this.num2',this.num2);
        },
        testFn(){
            console.log('这是 另一个方法');
        },
        addOne(){
            this.num = this.num + 1
        }
    }
}
</script>